<template>
	<view>
		<view class="tab">
			<!-- 买入卖出 -->
			<view class="paysell">
				<view @click="paydel(item.id)" v-for="(item, index) in items" :key="index">{{ item.name }}</view>
			</view>

			<!-- 买 -->
			<uni-popup ref="popup" type="bottom">
				<!-- 头部 -->
				<view class="nav">
					<view><img src="../static/assert/jieshi.png" alt="" /></view>
					<view @tap="tabnaver"><img src="../static/assert/chouy.png" alt="" /></view>
				</view>
				<!-- 限价市价 -->
				<view class="tabs-img"><view>市价</view></view>
				<!-- 市价 -->
				<!-- 手数 -->
				<view class="nav-one">
					<view>手数</view>
					<view>一手价值为{{ handS }}USDT</view>
				</view>
				<view class="nav-two-input"><input placeholder="输入手数" v-model="something" type="text" /></view>
				<!-- 进度条倍数 -->
				<view class="multiple">
					<view v-for="(item, index) in tiple" :key="index">
						<text>{{ item.name }}</text>
					</view>
				</view>
				<!-- 占用可用 -->
				<view class="free">
					<view>占用：{{ hold }} USDT</view>
					<view>可用：{{ Balance }} USDT</view>
				</view>
				<!-- 止盈止损设置 -->
				<!-- <view class="surplus"><view>止盈止损设置</view></view> -->
				<!-- 止损价 -->
				<view class="nav-one">
					<view>止损比例</view>
					<view>止盈比例</view>
				</view>
				<view class="nav-one-leff">
					<view><input @tap="actionSheetTap" v-model="Stop" placeholder="请输入止损价" type="text" value="" /></view>
					<view><input @tap="actionSheetLimit" v-model="Limit" placeholder="请输入止盈价" type="text" value="" /></view>
				</view>
				<!-- 看涨看跌 -->
				<view @click="submit(1)" v-if="this.buy == 1" class="bullish"><button>买入(看涨)</button></view>
				<view @click="submit(2)" v-else class="bullishone"><button>卖出(看跌)</button></view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import request from '@/utils/request';
import { toast } from '@/utils/toast';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			items: [
				{
					name: '买入(看涨)',
					id: '1'
				},
				{
					name: '卖出(看跌)',
					id: '2'
				}
			],
			buy: '',
			something: '',
			tiple: [{ name: '' }],
			Balance: '',
			handS: '300',
			hold: '--',
			Limit: '80%',
			Stop: '80%',
			itemList: ['10%', '20%', '30%', '40%', '50%', '60%']
		};
	},
	mounted() {
		console.log(this.hand, 888888888888888);
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('user', ['hand']),
		...mapState('user', ['product']),
		...mapState('user', ['BTCUSDT']),
		...mapState('user', ['ETHUSDT']),
		...mapState('user', ['LTCUSDT']),
		...mapState('user', ['IFLUSDT']),
		...mapState('user', ['ICLUSDT'])
	},
	onShow() {
		
	},
	created() {
		this.getUse();
	},

	components: { uniPopup },
	watch: {
		hand() {
			console.log(this.hand.name, 99999);
			if (this.hand.name == 'BTC/USDT') {
				this.handS = 300;
			} else if (this.hand.name == 'ETH/USDT') {
				this.handS = 100;
			} else if (this.hand.name == 'LTC/USDT') {
				this.handS = 100;
			} else if (this.hand.name == 'HS300/USDT') {
				this.handS = 1000;
			} else if (this.hand.name == 'IC500/USDT') {
				this.handS = 1000;
			}
		},
		something() {
			this.hold = this.something * this.handS;
		}
	},
	methods: {
		tabnaver() {
			this.$refs.popup.close();
		},
		actionSheetTap() {
			uni.showActionSheet({
				title: '止损比例',
				itemList: ['10%', '20%', '30%', '40%', '50%', '60%','70%','80%'],
				success: e => {
					console.log(e.tapIndex);
					// this.Stop = e
					this.Stop = this.itemList[e.tapIndex];
					console.log(this.Stop, 4444);
				}
			});
		},
		// 止赢比例
		actionSheetLimit() {
			uni.showActionSheet({
				title: '止赢比例',
				itemList: ['10%', '20%', '30%', '40%', '50%', '60%','70%','80%'],
				success: e => {
					console.log(e.tapIndex);
					this.Limit = this.itemList[e.tapIndex];
				}
			});
		},
		toPoint(percent) {
			var str = percent.replace('%', '');
			str = str / 100;
			return str;
		},
		submit(type) {
			
			var kindsId;
			if (this.hand.tradeCode == 'BTCUSDT') {
				var Price = this.BTCUSDT;
			} else if (this.hand.tradeCode == 'ETHUSDT') {
				var Price = this.ETHUSDT;
			} else if (this.hand.tradeCode == 'LTCUSDT') {
				var Price = this.LTCUSDT;
			} else if (this.hand.tradeCode == 'IC500') {
				var Price = this.IC500USDT;
			} else if (this.hand.tradeCode == 'HS300') {
				var Price = this.HS300USDT;
			}
			console.log(Price,8778787878)
			
			request('/infos/kinds/getlist', 'POST', {
				goodsId: this.hand.id,
				category: 1
			}).then(res => {
				console.log(res.data, 77);
				kindsId = res.data.KindsItem[0].id;
				if (type == 1) {
					var params = {
						guid: '001',
						loginId: this.userinfo.Customer.loginId,
						sessionId: this.userinfo.SessionId,
						code: this.hand.tradeCode,
						kindsId: kindsId,
						bs: 'buy',
						amount: this.something,
						limit: this.toPoint(this.Limit),
						stop: this.toPoint(this.Stop),
						type: 0,
						hq: Price
					};
					if(this.something==""){
						toast("请输入手数")
					}else if(this.something<=0){
						toast("手数不能为0")
					}else{
						this.sendItem(params);
						uni.showToast({
							title: '买入成功'
						});
						(this.something = ''),  this.$refs.popup.close();
					}
						
						
					
				} else if (type == 2) {
					var params = {
						guid: '001',
						loginId: this.userinfo.Customer.loginId,
						sessionId: this.userinfo.SessionId,
						code: this.hand.tradeCode,
						kindsId: kindsId,
						bs: 'sel',
						amount: this.something,
						limit: this.toPoint(this.Limit),
						stop: this.toPoint(this.Stop),
						type: 0,
						hq: Price
					};

					
						if(this.something==""){
							toast("请输入手数")
						}else if(this.something<=0){
							toast("手数不能为0")
						}else{
							this.sendItem(params);
							uni.showToast({
								title: '卖出成功'
							});
							(this.something = ''), this.$refs.popup.close();
						}
						
				
				}
			});
		},
		sendItem(params) {
			request('/trades/position/open', 'POST', params).then(res => {
				console.log(res.data, 77);
			});
		},

		paydel(index) {
			this.buy = index;
			this.$refs.popup.open();
			console.log(this.buy, 111);
		},
		getUse() {
			request('/customers/account/get', 'POST', {
				guid: '001',
				loginId: this.userinfo.Customer.loginId,
				sessionId: this.userinfo.SessionId
			}).then(res => {
				console.log(res.data, 122233333);
				this.Balance = res.data.Balance;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.tab {
	color: red;
	// height: 100upx;
}
.paysell {
	width: 100%;
	position: fixed;
	bottom: 40upx;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	// height: 50px;

	& > view:nth-child(1) {
		width: 44%;
		height: 80upx;
		background: linear-gradient(90deg, rgba(50, 140, 124, 1), rgba(53, 184, 167, 1));
		border-radius: 5upx;
		margin-left: 25upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& > view:nth-child(2) {
		width: 44%;
		height: 80upx;
		background: linear-gradient(90deg, rgba(165, 54, 80, 1), rgba(190, 70, 98, 1));
		border-radius: 5upx;
		margin-right: 25upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
// 买卖弹出层
.nav {
	display: flex;
	justify-content: space-between;
	padding: 0 30upx;
	margin-top: 50upx;

	& > view:nth-child(1) img {
		width: 40upx;
		height: 40upx;
	}

	& > view:nth-child(2) img {
		width: 40upx;
		height: 40upx;
	}
}
// 限价市价
.tabs-img {
	padding: 0 25upx;
	display: flex;
	justify-content: space-between;
	margin-top: 28upx;

	& > view {
		width: 45%;
		height: 65upx;
		background: #3a58cb;
		border: 1upx solid #3a58cb;
		border-radius: 2upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(159, 165, 200, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.actived {
		height: 65upx;
		background: rgba(58, 88, 203, 1);
		border-radius: 2upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(58, 88, 203, 1);
	}
}
/deep/.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box {
	width: 100%;
	max-height: 100% !important ;
	// overflow-y: scroll;
	background: #152335 !important;
}
// 杠杠倍数
.leverage {
	padding: 0 26upx;
	display: flex;

	& > view:nth-child(1) {
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(139, 145, 177, 1);
		margin-top: 15px;
	}

	& > view:nth-child(2) {
		width: 97upx;
		height: 45upx;
		background: rgba(21, 35, 53, 1);
		border: 1upx solid rgba(32, 51, 120, 1);
		border-radius: 2upx;

		margin-left: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(58, 88, 203, 1);
		margin-top: 20upx;
	}
}
// 笔数
.nav-one {
	display: flex;
	justify-content: space-between;
	padding: 0 26upx;
	margin-top: 0upx;
	text-align: left;

	& > view {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(139, 145, 177, 1);
	}
}
// 加减
.nav-two {
	display: flex;
	justify-content: space-between;
	width: 95%;
	margin: 26upx auto;

	& > view:nth-child(1) {
		width: 70upx;
		height: 65upx;
		background: rgba(31, 45, 99, 1);
		border-radius: 2upx;
		border: 1px solid rgba(31, 45, 99, 1);
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& > view:nth-child(2) input {
		width: 520upx;
		height: 65upx;
		background: rgba(17, 29, 47, 1);
		border: 2upx solid rgba(38, 48, 72, 1);
		border-radius: 2upx;
		color: #ffffff;
		text-align: center;
	}

	& > view:nth-child(3) {
		width: 70upx;
		height: 65upx;
		background: rgba(31, 45, 99, 1);
		border-radius: 2upx;
		border: 1px solid rgba(31, 45, 99, 1);
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
// 可用
.free {
	display: flex;
	justify-content: space-between;
	padding: 0 26upx;
	margin: 26upx auto;

	& > view:nth-child(1) {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(213, 217, 239, 1);
	}

	& > view:nth-child(2) {
		color: #ccd0e6;
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
	}
}
// 止盈
.surplus {
	display: flex;
	justify-content: space-between;
	padding: 0 26upx;
	padding-bottom: 44upx;
	& > view:nth-child(1) {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(139, 145, 177, 1);
		margin-top: 40upx;
	}
}
// 看涨看跌
.bullish button {
	width: 95%;
	position: relative;
	bottom: 30upx;
	height: 80upx;
	background: #35b8a7;
	border-radius: 2upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	border: 1upx solid #35b8a7;
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	left: 0;
	right: 0;
}

.bullishone button {
	width: 95%;
	position: relative;
	bottom: 30upx;
	height: 80upx;
	background: #be4662;
	border-radius: 2upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	border: 1upx solid #be4662;
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	left: 0;
	right: 0;
}
.nav-two-input input {
	width: 95%;
	height: 60upx;
	color: #ffffff;
	background: rgba(31, 45, 99, 1);
	border: 2upx solid rgba(38, 48, 72, 1);
	margin-left: 20upx;
	margin-top: 10upx;
	padding: 0 20upx;
}
.nav-one-leff {
	display: flex;
	justify-content: space-between;
	padding: 0 10upx;
	padding-bottom: 60upx;
	& > view input {
		width: 80%;
		height: 60upx;
		background: rgba(31, 45, 99, 1);
		border: 2upx solid rgba(38, 48, 72, 1);
		margin-left: 20upx;
		margin-top: 10upx;
		font-size: 28upx;
		padding: 0 20upx;
		color: #ffffff;
	}
}
</style>
